// Form Label Trick
// Author: Jeremy Boles
// Website: http://jeremyboles.com/
// Post URL: http://jeremyboles.com/weblog/2005/06/14/using-javascript-to-enhance-form-labels/

// Just call this function in your onload routine 
// (i.e. <body onload="labelTrick();"> or window.onload = labelTrick;)
function labelTrick()
{
	// Grab all of the <label> tags
	var labels = document.getElementsByTagName("label");

	// Make sure we found some labels
	if (labels)
	{
		// Iterate through the label tags
		for (var i = 0; i < labels.length; i++)
		{
			// Make sure they are part of the "inside" class
			if (labels[i].getAttribute("class") == "inside")
			{
				// Grab the for attribute from the label tag
				var labelFor = labels[i].getAttribute("for");
				// Get the input tag that the label references
				var inputTag = document.getElementById(labelFor);
				// Get the label's text
				var labelText = labels[i].firstChild.nodeValue;
				// Just some variables to hold the colors we need
				var labelColor, inputColor;
				// If we're using standard DOM stuff
	      if (document.defaultView.getComputedStyle)
	      {
	      	labelColor = document.defaultView.getComputedStyle(labels[i], null).getPropertyValue("color");
	     		inputColor = document.defaultView.getComputedStyle(inputTag, null).getPropertyValue("color");
	      }
	      // Ah, we must be using IE
	      else if (labels[i].currentStyle)
	      {
	      	labelColor = labels[i].currentStyle.color;
	      	inputColor = inputTag.currentStyle.color;
	      }
				// Change the "value," or what is display inside
				// the input tag to the label's text
				inputTag.value = labelText;
				// Change the label color
				inputTag.style.color = labelColor;
				
				// Hide the label tag
				labels[i].style.display = "none";
				// Make the event handlers
				inputTag.onfocus = makeFocus(labelText, inputColor);
				inputTag.onblur = makeBlur(labelText, labelColor);
			}
		}

		// Grab the first label
		var currentNode = labels[0].parentNode;

		// See if its direct parent is the form element, if it
		// is not search of the tag hierarchy untill
		// we find the form
		while (currentNode.tagName != "FORM")
		{
			currentNode = currentNode.parentNode;
		}

		// Once we get here, the currentNode variable should 
		// point to the form element so add an onsubmit event
		// to it.  If currentNode does not point to a form element
		// thats the HTML author's problem.  Try writing semantic
		// markup.
/*		currentNode.onsubmit = function()
		{
			// Iterate through the tags, didn't we do this once already?
			for (var i = 0; i < labels.length; i++)
			{
				// Grab the for attribute from the label tag
				var labelFor = labels[i].getAttribute("for");
				// Get the input tag that the label references
				var inputTag = document.getElementById(labelFor);

				// If we still have the value of the label in the form,
				// it must mean the user didn't put anything
				// might as well clear the field so we don't
				// confuse our scripts
				if (inputTag.value == labels[i].firstChild.nodeValue)
				{
					inputTag.value = "";
				}
			}
		}
*/
	}
}

// Makes a function for the onfocus event of the form element
function makeFocus(labelText, changeColor)
{
	return function()
	{
		// If the value is the label text (i.e. nothing has been typed yet)
		if (this.value == labelText)
		{
			// Clear the form
			this.value = "";
			// and change the color
			this.style.color = changeColor;
		}
	}
}

// Makes a function for the onblur event of the form element
function makeBlur(labelText, changeColor)
{
	return function ()
	{
		// If nothing has been typed
		if (this.value == "")
		{
			// Make the value the label value
			this.value = labelText;
			// Change change to color back
			this.style.color = changeColor;
		}
	}
}